<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
	<title>地球</title>
	<link rel="stylesheet" type="text/css" href="css/index.css">
	<link rel="stylesheet" type="text/css" href="css/swiper.min.css">
	<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
	<script type="text/javascript" src="js/swiper.min.js"></script>
	<script src="js/picmove.js"></script>
	<script type='text/javascript' src='http://d3js.org/d3.v3.min.js'></script>
	<script type='text/javascript' src='http://d3js.org/topojson.v1.min.js'></script>
	<style type="text/css">
	html{
	    width:100%; 
    	height:100%;
	}
    body {
    	width:100%; 
    	height:100%; 
    	position: relative;
        background: #eee;
        font-family:Helvetica, Arial, sans-serif;
        font-size: 14px;
        color:#000;
        margin: 0;
        padding: 0;
    }
   
    .swiper-container {
        width:1300px;
        height:170px;
		margin:0 auto;
		margin-top:100px;
        /*position:absolute;
        left:50%; 
        transform:translateX(-50%); 
        bottom:0; */  

    }
    .swiper-container1 {
        width:400px;
        height:275px;
        /*position:absolute;
        left:53px;
        bottom:10px;*/    
    }
    .swiper-slide {
        text-align: center;
        font-size: 18px;
        background: #fff;
        position:relative; 
        /* Center slide text vertically */
        display: -webkit-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        -webkit-justify-content: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        -webkit-align-items: center;
        align-items: center;
    }
    .my-wrapper{
        display: flex;
        height: 300px;
    }
    .swiper-slide1 img{
    	position: absolute;
		top:10px;
		left:38px;
    }
    .swiper-slide2 img{
		width: 400px;
		position: absolute;
		top: 31px;
		left: -3px;
    }
    .swiper-slide p{
    	position: absolute;
		bottom:5px;
		left: -74px;
    }
    .mask{
    	display:none; 
    	position:absolute;
    	top:0;
    	left:0;
    	right:0;
    	bottom:0;  
    	background:#fff;
    	z-index: 10;
    	filter:alpha(opacity=50); 
	    -moz-opacity:0.5;
	    opacity:0.5;
    }
    .mask-show{
    	width:1000px; 
    	height:300px;  
    	background:#ccc; 
    	display:none;
    	position:absolute;
    	left:20%; 
		top:200px;
    	z-index: 20;
    }
    .mask-show span{  
    	display:block;
        position:absolute;
        top: -9px;
		left: 962px;
        font-size:55px;
        color:#333; 
        z-index:35; 
        cursor:pointer;     
    }
    .mask-pic{
    	z-index: 30;
    }
    .fl{
    	float:left;
    }
    .fr{
    	float:right;
    }
    .rightbox{
    	padding-top:50px; 
    	width:400px;
    	height:250px;
    	background:#fff;   
    }
    #box{
    	z-index:40; 
    }
    .clearfix:after{content: ".";display: block;height: 0;clear: both;visibility: hidden;}
	.clearfix{zoom:1;}
	ul,li{list-style:none; display: none;}
	img{border:0;}
	.wrapper{width:400px;margin:0 auto;padding-bottom:50px;}
	h1{height:50px;line-height:50px;font-size:22px;font-weight:normal;font-family:"Microsoft YaHei",SimHei;margin-bottom:20px;}
	/* focus */
	#focus{width:400px;height:280px;overflow:hidden;position:relative;}
	#focus ul{height:380px;position:absolute; display: none;}
	#focus ul li{float:left;width:800px;height:280px;overflow:hidden;position:relative;background:#000;}
	#focus ul li div{position:absolute;overflow:hidden;}
	#focus .btn{position:absolute;width:780px;height:10px;padding:5px 10px;right:0;bottom:0;text-align:right;}
	#focus .btn span{display:inline-block;_display:inline;_zoom:1;width:25px;height:10px;_font-size:0;margin-left:5px;cursor:pointer;background:#fff;}
	#focus .btn span.on{background:#fff;}
	#focus .preNext{width:45px;height:100px;position:absolute;top:90px;background:url(images/sprite.png) no-repeat 0 0;cursor:pointer;}
	#focus .pre{left:0;background:#ccc; }
	#focus .next{right:0;background-position:right top;background:#ccc;}
	.md{margin:0 auto;width:920px; height:720px;}
	</style>
</head>
<body class="bg">
     <div class="md">
        <canvas id='rotatingGlobe' width="1200" height="1000"
			style='width:920px; height:720px; cursor: move; '>
		</canvas>
	</div>
		<script type='text/javascript' src='js/planetaryjs.min.js'></script>
		<script type='text/javascript' src="js/myApp.js"></script>     
	    <div class="swiper-container">
	        <div id="swiperWrapperDiv" class="swiper-wrapper"></div>
	        <div class="swiper-button-prev"></div>
	        <div class="swiper-button-next"></div>
	        <!-- Add Pagination -->
	        <div class="swiper-pagination"></div>
        </div>
    
		<div class="mask"></div>
		<div class="mask-show">
			<span>×</span>
			<div id="box" class="fl"></div>
			<div id="frContext" class="rightbox fr"></div>
		</div>
    
    <script>
    var swiper;
    
    var ind = 0;
    var dataList = null;

    $(function(){
    		$.ajax({
    			url : '../baseData/getService',
    			type : 'POST', //GET
    			async : true, //或false,是否异步
    			timeout : 5000, //超时时间
    			dataType : 'json', //返回的数据格式：json/xml/html/script/jsonp/text
    			success : function(data, textStatus, jqXHR) {
    				dataList = data;
    				
    				var imgHtml = "";
    				for(var i = 0; i<dataList.length; i++){
    	    			var imgPath = dataList[i].imgs;
    	        		var imgPaths = imgPath.split("|");
    	        		imgHtml += "<div class=\"swiper-slide swiper-slide1\">";
    	        		if(imgPaths.length >= 2){
    		   				imgHtml += "	<img src=\""+imgPaths[1]+"\" width=\"184px;\" height=\"120px;\" style=\"margin-left:-35px;\" onclick=\"showDetail('"+dataList[i].imgs+"', '"+dataList[i].name+"', '"+dataList[i].content+"');\">";
    	        		}else{
    		   				imgHtml += "	<img src=\"\">";
    	        		}
    	   				imgHtml += "	<p>"+dataList[i].name+"</p>";
    					imgHtml += "</div>";
    	    		}
   	        		$("#swiperWrapperDiv").html(imgHtml);
   	        		
   	        		swiper = new Swiper('.swiper-container', {
   	        	        pagination: '.swiper-pagination',
   	        	        slidesPerView: 6,
   	        	        paginationClickable: true,
   	        	        spaceBetween: 30,
   	        	        loop:true,
   	        	        autoplay : 1000,
   	        	        autoplayDisableOnInteraction:false,
   	        	        prevButton:'.swiper-button-prev',
   	        	        nextButton:'.swiper-button-next'
   	        	    });
   	        		
//    	        		ind = 3;
   	     			setImg();
    			}
    		})
    		
    		setInterval(setImg, 5000);
    	});

    	
    	function setImg() {
    		var imgPath = dataList[ind].imgs;
    		var imgPaths = imgPath.split("|");
    		var imgHtml = "";
    		
    		imgHtml += "<p class=\"p1\">"+dataList[ind].name+"</p>";
    		imgHtml += "<div>";
			imgHtml += "	<p class=\"p2\">"+dataList[ind].content+"</p>";
			imgHtml += "</div>";
    		
		    imgHtml += " <div class=\"swiper-container swiper-container1\">";
		    imgHtml += " 	<div class=\"my-wrapper\">";
    		for (var i = 1; i < imgPaths.length; i++) {
    			imgHtml += "<div class=\"swiper-slide swiper-slide2\"><img src=\""+imgPaths[i]+"\"></div>";
    		}
    		imgHtml += "	</div>";
			imgHtml += "	<div class=\"swiper-button-prev\"></div>";
			imgHtml += "	<div class=\"swiper-button-next\"></div>";
			imgHtml += "	<div class=\"swiper-pagination\"></div>";
			imgHtml += "</div>";
    		$("#bottomContentDiv").html(imgHtml);
    		
    		if(ind < (dataList.length-1)){
    			ind++;
    		}else{
    			ind = 0;
    		}
    		
    		swiper = new Swiper('.swiper-container', {
    	        wrapperClass : 'my-wrapper',
    	        // pagination: '.swiper-pagination',
    	        // slidesPerView: 1,
    	        paginationClickable: true,
    	        spaceBetween: 30,
    	        loop:true,
    	        autoplay : 3000,
    	        autoplayDisableOnInteraction:false,
    	        prevButton:'.swiper-button-prev',
    	        nextButton:'.swiper-button-next'
    	    });
    	}
    	
    	function showDetail(imgPath, name, context){
    		$(".mask").hide();
        	$(".mask-show").hide();
    		
//         	alert(name);
        	
        	$(".mask").show();
       		$(".mask-show").show();
        	
        	var imgPaths = imgPath.split("|");
        	var imgs = new Array();
        	var obj;
        	for (var i = 1; i < imgPaths.length; i++) {
        		obj = new Object();
    			obj.imgUrl = imgPaths[i];
    			obj.href = '#';
    			
    			imgs[i-1] = obj;
    		}
        	
        	 $('#box').html("");
        	 $('#frContext').html(context);
        	 $('#box').fade({
                 url: imgs,
                 boxWid: 600,
                 boxHei: 300
             }).css({
                 marginTop:'0px'
             });
    	}
    	
        $(".mask-show span").click(function(){
        	$(".mask").hide();
        	$(".mask-show").hide();
        });
    </script>
</body>
</html>
